<template>
	<view class="login-container">
		<image class="background-image" src="/static/images/backg.png" mode="aspectFill"></image>
		
		<view class="content-overlay">
			<view class="logo-section">
				
				<text class="app-name" style="color:lawngreen">  义诊活动预约系统</text>
			</view>
			
			<view class="form-section">
				<view class="input-group">
					<text class="label">用户名</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请输入用户名" 
						v-model="formData.username"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">密码</text>
					<input 
						class="input" 
						type="password" 
						placeholder="请输入密码" 
						v-model="formData.password"
						maxlength="20"
					/>
				</view>
				
				<button class="login-btn" @click="handleLogin" :loading="loading">
					{{ loading ? '登录中...' : '登录' }}
				</button>
				
				<view class="action-links">
					<text class="link" @click="goToRegister">注册账号</text>
					<text class="link" @click="goToForgotPassword">忘记密码</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				username: '',
				password: ''
			},
			loading: false
		}
	},
	methods: {
		async handleLogin() {
			if (!this.formData.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			
			if (!this.formData.password.trim()) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			this.loading = true;
			
			try {
				const response = await uni.request({
					url: 'http://localhost:8080/user/login',
					method: 'POST',
					data: this.formData,
					header: {
						'Content-Type': 'application/json'
					}
				});
				
				if (response.data.code === 200) {
					// 保存token和用户信息
					uni.setStorageSync('token', response.data.data.token);
					uni.setStorageSync('userInfo', response.data.data.user);
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					
					// 跳转到主页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: response.data.message || '登录失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('登录失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		
		goToForgotPassword() {
			uni.navigateTo({
				url: '/pages/forgot-password/forgot-password'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content-overlay {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	padding: 60rpx 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo-section {
	text-align: center;
	margin-bottom: 80rpx;
	
	
	
	.app-name {
		font-size: 70rpx;
		color: #ffffff;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
}

.form-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.input-group {
	margin-bottom: 40rpx;
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		
		&:focus {
			border-color: #4CAF50;
			background: #ffffff;
		}
	}
}

.login-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
	
	&:active {
		opacity: 0.8;
	}
}

.action-links {
	display: flex;
	justify-content: space-between;
	
	.link {
		color: #4CAF50;
		font-size: 28rpx;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style> 